<template>
  <div class="information">
    <div class="box">

      <div class="title">{{title}}</div>
      <div class="content" v-html="content"></div>

    </div>
  </div>
</template>

<script>

  export default {
    name: 'Information',
    data () {
      return {
        title: '',
        content:''
      }
    },
    methods:{
      unescapeHTML: function(a){
              a = "" + a;
            return a.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&apos;/g, "'");
//        转义字符变成html
      },
    },

    mounted:function(){

//      {
//      "code": 200,
//        "msg": "succ",
//        -"data": {
//        -"info": {
//          "information_id": "7",
//            "bottom": "0",
//            "sort_order": "5",
//            "status": "1",
//            "language_id": "2",
//            "title": "相关协议",
//            "description": "&lt;p&gt;相关协议相关协议相关协议相关协议相关协议相关协议相关协议测试测试&lt;br&gt;&lt;/p&gt;",
//            "meta_title": "相关协议",
//            "meta_description": "",
//            "meta_keyword": ""
//        }

        var vm = this;
       var ajaxData = {};
      ajaxData.information_id = 7;
      $.ajax({
        type:'get',
        url:RouteMap.information,
        data:ajaxData,
        success:function(res){
          if(res.code ==200){
        vm.title = res.data.info.title;
         var content = res.data.info.description;
//            console.log(vm.unescapeHTML(content));
        vm.content = vm.unescapeHTML(content);

          }
          else{
//                      Toast(res.msg)
          }
        }
      })
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .box {
    background:#fff;
    width:100%;
    box-sizing:border-box;
    margin-top:.3rem;
    padding:0 .7rem;
    color: #1d1d1d;

  }
  .title{
    text-align: center;
    padding: 1rem 0;
    font-size: .7rem;
    color: #1b1b1b;
  }
  .content{
    padding:0 .5rem 2rem;
    font-size: .5rem;
  }
</style>
